<template>
  <div class="apply-progress">
    <div class="title">
      <div class="block"></div>
      <div class="word">申请进度</div>
      <div class="button">
        <el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div class="setting-content-title">申请进度</div>

    <div class="apply-progress-content">
      <!-- <div class="step" v-for="(item, index) in status" :key="index">
        <div class="dot"></div>
        <div class="apply-progress-content-title">{{ item.statusText }}</div>
        <div class="apply-progress-content-time">2017</div>

        <div class="imgg">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div> -->

      <div class="step" :class="statusId >= 1 ? 'step-active' : ''">
        <div class="dot" :class="statusId >= 1 ? 'dot-active' : ''"></div>
        <div class="apply-progress-content-title">完成递交-等待确认</div>
        <div class="apply-progress-content-time">
          {{ statusTime[0] || "暂无时间" }}
        </div>
        <div>最多上传5张图片</div>

        <div class="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :http-request="selectPicUpload1"
            :on-remove="handleRemove"
            :limit="5"
            :file-list="fileList1"
            multiple
            accept="jpg,jpeg,png,PNG"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>

      <div class="step" :class="statusId >= 2 ? 'step-active' : ''">
        <div class="dot" :class="statusId >= 2 ? 'dot-active' : ''"></div>
        <div class="apply-progress-content-title">完成递交-等待结果</div>
        <div class="apply-progress-content-time">
          {{ statusTime[1] || "暂无时间" }}
        </div>
        <div>最多上传5张图片</div>

        <div class="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :http-request="selectPicUpload2"
            :on-remove="handleRemove"
            :limit="5"
            :file-list="fileList2"
            multiple
            accept="jpg,jpeg,png,PNG"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>

      <div class="step" :class="statusId >= 3 ? 'step-active' : ''">
        <div class="dot" :class="statusId >= 3 ? 'dot-active' : ''"></div>
        <div class="apply-progress-content-title">已出结果-待确认OFFER</div>
        <div class="apply-progress-content-time">
          {{ statusTime[2] || "暂无时间" }}
        </div>
        <div>最多上传5张图片</div>

        <div class="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :http-request="selectPicUpload3"
            :on-remove="handleRemove"
            :limit="5"
            :file-list="fileList3"
            multiple
            accept="jpg,jpeg,png,PNG"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <div class="step" :class="statusId >= 4 ? 'step-active' : ''">
        <div class="dot" :class="statusId >= 4 ? 'dot-active' : ''"></div>
        <div class="apply-progress-content-title">完成</div>
        <div class="apply-progress-content-time">
          {{ statusTime[3] || "暂无时间" }}
        </div>
        <div>最多上传5张图片</div>

        <div class="img">
          <el-upload
            action="#"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :http-request="selectPicUpload4"
            :on-remove="handleRemove"
            :limit="5"
            :file-list="fileList4"
            multiple
            accept="jpg,jpeg,png,PNG"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getApply,
  uploadApplyPhotoInfo,
  uploadApplyStatusInfo,
} from "../../../../api";
export default {
  inject: ["reload"],
  name: "applyProgress",
  components: {},

  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      orderId: "",
      formData: new FormData(),
      statusText: [
        "完成递交-等待确认",
        "完成递交-等待结果",
        "已出结果-待确认OFFER",
        "完成",
      ],
      files: "",
      statusId: 0,
      statusTime: "",
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      // status: [
      //   {
      //     statusId: 1,
      //     statusText: "完成递交-等待确认"
      //   },
      //   {
      //     statusId: 2,
      //     statusText: "完成递交-等待结果"
      //   },
      //   {
      //     statusId: 3,
      //     statusText: "已出结果-待确认OFFER"
      //   },
      //   {
      //     statusId: 4,
      //     statusText: "完成"
      //   },
      // ]
    };
  },

  mounted() {
    this.$emit("routeName", "applyProgress");
    this.orderId = this.$route.params.orderId;
    console.log(this.orderId);
    getApply(this.orderId).then((res) => {
      console.log(res);
      let data = res.data;
      if (data) {
        this.statusId = data.statusId;
        this.statusTime = data.timeLineValue;
      }
      // for(let i = 0; i < data.materials.length; i++) {
      //   this.dialogImageUrl = data.materials[i];
      // }
      if (this.statusId >= 1) {
        for (let i = 0; i < data.materials.length; i++) {
          this.fileList1.push({
            url: data.materials[i],
          });
        }
      }

      if (this.statusId >= 2) {
        for (let j = 0; j < data.materials.length; j++) {
          this.fileList2.push({
            url: data.materials[j],
          });
        }
      }

      if (this.statusId >= 3) {
        for (let i = 0; i < data.materials.length; i++) {
          this.fileList3.push({
            url: data.materials[i],
          });
        }
      }

      if (this.statusId >= 4) {
        for (let i = 0; i < data.materials.length; i++) {
          this.fileList4.push({
            url: data.materials[i],
          });
        }
      }
    });
  },

  methods: {
    refresh() {
      this.reload();
    },
    selectPicUpload1(file) {
      if (this.statusId === 0) this.statusId = 1;
      console.log(file);
      this.formData.append("files", file.file);
      // this.formData.append("before", this.fileList1[0].url);
      // console.log(this.fileList1[0].url);
      uploadApplyPhotoInfo(this.orderId, this.formData).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            message: "上传信息成功",
            type: "success",
          });
        } else {
          this.$message.error("上传信息失败");
        }
      });

      uploadApplyStatusInfo(this.orderId, this.statusId).then((res) => {
        console.log(res);
      });
    },
    selectPicUpload2(file) {
      if (this.statusId === 1) {
        this.statusId = 2;
      }
      this.formData.append("files", file.file);
      uploadApplyPhotoInfo(this.orderId, this.formData).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            message: "上传信息成功",
            type: "success",
          });
        } else {
          this.$message.error("上传信息失败");
        }
      });
      uploadApplyStatusInfo(this.orderId, this.statusId).then((res) => {
        console.log(res);
      });
    },
    selectPicUpload3(file) {
      if (this.statusId === 2) this.statusId = 3;
      this.formData.append("files", file.file);
      uploadApplyPhotoInfo(this.orderId, this.formData).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            message: "上传信息成功",
            type: "success",
          });
        } else {
          this.$message.error("上传信息失败");
        }
      });
      uploadApplyStatusInfo(this.orderId, this.statusId).then((res) => {
        console.log(res);
      });
    },
    selectPicUpload4(file) {
      if (this.statusId === 3) this.statusId = 4;
      this.formData.append("files", file.file);
      uploadApplyPhotoInfo(this.orderId, this.formData).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.$message({
            message: "上传信息成功",
            type: "success",
          });
        } else {
          this.$message.error("上传信息失败");
        }
      });
      uploadApplyStatusInfo(this.orderId, this.statusId).then((res) => {
        console.log(res);
      });
    },
    handlePictureCardPreview(file, fileList) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      if (this.fileList1.length !== 0) {
        for (let i = 0; i < fileList.length; i++) {
          this.formData.append("before", fileList[i].url);
        }
      }
      uploadApplyPhotoInfo(this.orderId, this.formData).then((res) => {
        console.log(res);
      });
    },
    refresh() {
      this.reload();
    },
  },
};
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 200px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}

.setting-content-title {
  font-size: 14px;
  margin-top: 20px;
  padding-left: 20px;
  border: 1px solid #e4e4e4;
  background-color: #f3f3f3;
  height: 50px;
  line-height: 50px;
}

.apply-progress-content {
  padding: 30px 60px 30px 60px;
}

.apply-progress-content .step {
  position: relative;
  /* margin-top: 50px; */
  padding-left: 30px;
  border-left: 1px solid #ada6a6;
  padding-bottom: 30px;
}

.apply-progress-content .step .dot {
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: #ccc;
  border-radius: 50%;
  left: -8px;
}

.img {
  width: 1000px;
  height: 200px;
}

.apply-progress-content .step .dot-active {
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: #8ddece;
  border-radius: 50%;
  left: -8px;
}

.apply-progress-content .step-active {
  border-left: 1px solid #8ddece;
  position: relative;
  /* margin-top: 50px; */
  padding-left: 30px;
  padding-bottom: 30px;
}

.apply-progress-content-time {
  font-size: 14px;
  color: #ccc;
  margin-top: 5px;
  margin-bottom: 20px;
}
</style>
